<template>
  <!-- 预览 -->
  <div v-if="visible" class="ant-modal-root preview" :class="className">
    <div
      :data-size="state.previewSize"
      tabindex="-1"
      class="ant-modal-wrap1"
      role="dialog"
      v-drag
    >
      <div role="document" class="img-modal">
        <div class="ant-modal-content">
          <div class="ant-modal-body" style="padding: 0px">
            <header>
              <div class="preview-action pr">
                <div class="f1">
                  <a-button size="small" class="mr10" @click="decline">
                    <a-icon type="minus" />
                  </a-button>
                  <a-input
                    id="input"
                    ref="inputText"
                    v-model="state.previewSize"
                    :max-length="3"
                    style="width: 100px"
                  />
                  <span class="ml10">%</span>
                  <a-button size="small" class="ml10" @click="increase">
                    <a-icon type="plus" />
                  </a-button>
                </div>
                <div>
                  <a-button
                    type="link"
                    class="mr20"
                    @click="downloadImg(state.fileList[state.activeIndex])"
                  >
                    下载
                  </a-button>
                  <span class="cp pa r-50 t-40 lh-normal" @click="onClose">
                    <a-icon type="close-circle" style="font-size: 40px" />
                  </span>
                </div>
              </div>
            </header>
            <div class="preview_img_wrapper" style="padding: 0 25px">
              <div
                class="custom-slick-arrow slick-prev"
                @click="afterChange(-1)"
              >
                <a-icon type="left" />
              </div>
              <div class="view_img_list" style="overflow: hidden; height: 100%">
                <div
                  v-for="(item, index) in fileList"
                  :key="item.uid"
                  class="view_img_item df aic"
                  :class="{
                    active: index === state.activeIndex
                  }"
                >
                  <img
                    v-if="
                      ['png', 'jpeg', 'jpg', 'gif', 'jfif'].includes(
                        item.ossType.toLowerCase()
                      )
                    "
                    v-lazyLoad="item.ossUrl"
                    style="margin: auto"
                    data-w="800"
                    :data-size="state.previewSize"
                    alt="该文件不支持在线查看，可尝试下载下来查看"
                    :style="{
                      transform: `scale3d(${state.previewSize / 100},${
                        state.previewSize / 100
                      },1)`
                    }"
                  />
                </div>
              </div>
              <div
                class="custom-slick-arrow slick-next"
                @click="afterChange(1)"
              >
                <a-icon type="right" />
              </div>
            </div>
          </div>
        </div>
        <div
          tabindex="0"
          aria-hidden="true"
          style="width: 0px; height: 0px; overflow: hidden"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { downloadImg } from 'utils/file.js'

export default {
  name: 'Preview',
  directives: {
    drag(el) {
      if (!el) {
        return false
      }
      var direc = ''
      var resizeable = false
      var clientX = 0
      var clientY = 0
      const getDirection = function (ev) {
        let xP, yP, offset, dir
        dir = ''

        xP = ev.offsetX
        yP = ev.offsetY
        offset = 25
        console.log(22, xP, yP)

        if (yP < offset) dir += 'n'
        else if (yP > el.offsetHeight - offset - 40) dir += 's'
        if (xP < offset) dir += 'w'
        else if (xP > el.offsetWidth - offset) dir += 'e'

        return dir
      }
      // const mouseHover = function (e) {
      //   if (e.target.nodeName === 'INPUT') {
      //     return
      //   }
      //   e.preventDefault()
      //   e.stopPropagation()
      //   direc = getDirection(e)

      //   if (direc !== '') {
      //     el.style.cursor = ['e', 'w'].includes(direc)
      //       ? 'col-resize'
      //       : 'row-resize'
      //   } else {
      //     el.style.cursor = 'default'
      //   }
      // }

      // // 在元素上做些操作
      el.onmousedown = function (e) {
        if (e.target.nodeName === 'INPUT') {
          return
        }
        e.preventDefault()
        e.stopPropagation()
        const size = +e.currentTarget.dataset.size
        const disx = e.clientX - el.offsetLeft
        const disy = e.clientY - el.offsetTop
        const nodeName = e.currentTarget.nodeName
        // 鼠标按下时
        direc = getDirection(e)
        if (direc !== '') {
          resizeable = true
          el.style.cursor = ['e', 'w'].includes(direc)
            ? 'col-resize'
            : 'row-resize'
          clientX = e.clientX
          clientY = e.clientY
        }
        document.onmousemove = function (e) {
          console.log(444)
          const dir = getDirection(e)
          let cursor
          if (dir === '') cursor = 'default'
          else cursor = dir + '-resize'
          // 修改鼠标显示效果
          el.style.cursor = cursor
          let x = e.clientX - disx
          const y = e.clientY - disy
          if (!resizeable) {
            if (x >= window.innerWidth - el.offsetWidth) {
              x = window.innerWidth - el.offsetWidth
            }
            el.style.left = x + 'px'
            el.style.top = y + 'px'
            el.style.transform =
              nodeName === 'IMG'
                ? `scale3d(${size / 100},${size / 100},1)`
                : 'unset'
          } else {
            if (direc.indexOf('e') > -1) {
              el.style.width = Math.max(520, e.clientX - el.offsetLeft) + 'px'
            }
            if (direc.indexOf('w') > -1) {
              el.style.width =
                Math.max(520, clientX - e.clientX + el.offsetWidth) + 'px'
              el.offsetWidth > 520 && (el.style.left = e.clientX + 'px')
              clientX = e.clientX
            }
            if (direc.indexOf('n') > -1) {
              el.style.height =
                Math.max(600, clientY - e.clientY + el.offsetHeight) + 'px'
              el.offsetHeight > 700 && (el.style.top = e.clientY + 'px')
              clientY = e.clientY
            }
            if (direc.indexOf('s') > -1) {
              el.style.height = Math.max(600, e.clientY - el.offsetTop) + 'px'
            }
          }
        }
        document.onmouseup = function () {
          resizeable = false
          el.style.cursor = 'default'
          document.onmousemove = document.onmouseup = null
          // el.onmousemove = mouseHover
        }
      }
    }
  },
  props: {
    file: {
      type: Object,
      default() {
        return {}
      }
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    showDownload: {
      type: Boolean,
      default: false
    },
    close: {
      type: Function,
      default: () => {}
    },
    className: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      downloadImg,
      state: {
        previewSize: 100,
        file: this.file,
        boxWidth: null,
        activeIndex:
          this.fileList.findIndex(item => item.ossUrl === this.file.ossUrl) ||
          0,
        fileList: this.fileList,
        isSupportWebp: false,
        imgWidth: []
      }
    }
  },
  mounted() {
    this.handleDetectWebp()
  },
  methods: {
    // 判断是否支持webp
    handleDetectWebp() {
      try {
        this.state.isSupportWebp =
          !![].map &&
          document
            .createElement('canvas')
            .toDataURL('image/webp')
            .indexOf('data:image/webp') === 0
      } catch (e) {
        this.state.isSupportWebp = false
      }
    },
    // getImgLink (url) {
    //   const suffix =
    //     this.state.isSupportWebp &&
    //     '?x-oss-process=image/format,webp/quality,q_100'
    //   return url + suffix
    // },
    afterChange(baseIndex) {
      this.state.previewSize = 100
      if (baseIndex === -1) {
        if (this.state.activeIndex === 0) {
          this.state.activeIndex = this.state.fileList.length - 1
        } else {
          this.state.activeIndex = this.state.activeIndex + baseIndex
        }
      } else {
        if (this.state.activeIndex === this.state.fileList.length - 1) {
          this.state.activeIndex = 0
        } else {
          this.state.activeIndex = this.state.activeIndex + baseIndex
        }
      }
    },
    onClose() {
      if (this.close) {
        this.close()
      }
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    increase() {
      this.state.previewSize = +this.state.previewSize + 10
    },
    decline() {
      this.state.previewSize = +this.state.previewSize - 10
    }
  }
}
</script>
<style lang="less" scoped>
.ant-modal-wrap1 {
  width: 520px;
  position: fixed;
  z-index: 1000;
  top: 15%;
  height: 80%;
  left: calc(50% - 250px);
}
.preview {
  .img-modal {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    margin: 0 auto;
    /* padding-bottom: 24px;
    pointer-events: none; */
  }

  .ant-modal-content,
  .ant-modal-body {
    height: 100%;
    header {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      border-bottom: 1px solid #eaeaea;
    }
  }
  &-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .preview_img_wrapper {
    overflow: hidden;
    position: relative;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    .slick-prev {
      left: 25px;
    }

    .custom-slick-arrow {
      font-size: 16px;
      color: #333;
      width: 25px;
      line-height: 50px;
      text-align: center;
      z-index: 101;
      height: 50px;
      right: 0;
      background-color: hsla(0, 0%, 100%, 0.6);
      position: absolute;
      top: 50%;
      padding: 0;
      transform: translateY(-50%);
      cursor: pointer;
      &.slick-next {
        right: 25px;
      }
    }
  }
  .view_img {
    &_list {
      width: 100%;
      transition: all 0.3s;
      text-align: center;
      position: relative;
      z-index: 100;
      width: 100%;
      margin: 0 auto;
    }
    &_item {
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 100;
      position: absolute;
      top: 0;
      visibility: hidden;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
      img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        position: relative;
      }
      &.active {
        opacity: 1;
        visibility: visible;
        position: relative;
      }
    }
  }
}
</style>
